/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    ListView,
    Image,
} from 'react-native';

export default class Details extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({

        headerTitle: '详情',
        //设置滑动返回的距离
        gestureResponseDistance: {horizontal: 300},

        //是否开启手势滑动返回，android 默认关闭 ios打开
        // gesturesEnabled: true,

        //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
        headerBackTitle: null,
        //导航栏的样式
        headerStyle: styles.headerStyle,
        //导航栏文字的样式
        headerTitleStyle: styles.headerTitleStyle,
        //返回按钮的颜色
        headerTintColor: 'white',

        //隐藏顶部导航栏
        // header: null,

        //设置顶部导航栏右边的视图  和 解决当有返回箭头时，文字不居中
        headerRight: (<View/>),

        //设置导航栏左边的视图
        // headerLeft: (<View/>),

    });
    constructor(props){
        super(props);

        this.state = {
          data: null,
        };
      }

      render() {
        if(!this.state.data){
          return(
              <Text>loading...</Text>
          );
        } else {
          return (
            <ListView
              dataSource={this.state.data}
              renderRow={(rowData) => this.renderRow(rowData)}>
            </ListView>
          );
        }
      }

    // 生命周期回调函数
      componentDidMount(){
        fetch('http://www.imooc.com/api/teacher?type=4&num=30')
        .then((response) => response.json())
        .then((jsonData) => {
          this.setState({
            data: new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2 }).cloneWithRows(jsonData.data),
//                    new ListView.DataSource({
                          //                          getSectionData: getSectionData, // 获取组中数据
                          //                          getRowData: getRowData, // 获取行中的数据
                          //                          rowHasChanged: (r1, r2) => r1 !== r2,
                          //                          sectionHeaderHasChanged: (s1, s2) => s1 !== s2
                          //                      })
          });
        })
        .catch((error) => {
          alert(error);
        });
      }


      // 返回listview的一行
      renderRow(rowData){
        return(
          <View
            style = {styles.lvRow}>
              <Image
                style = { styles.img }
                source = { { uri: rowData.picSmall } }/>
            <View
              style = { styles.textView }>
              <Text
                style = { styles.textTitle }
                numberOfLines = { 1 }>
                { rowData.name }
              </Text>
              <Text
                style = { styles.textContent }>
                { rowData.description }
              </Text>
            </View>
          </View>
        )
      }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: 240,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    },
    headerStyle: {
        backgroundColor: '#EB3695',
    },
    headerTitleStyle: {
        color: 'white',
        //设置标题的大小
        fontSize: 18,
        //居中显示
        alignSelf: 'center',
    },
    lvRow: {
        flex: 1,
        flexDirection: 'row',
        padding: 10,
      },
      textView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5,
      },

      textTitle: {
        flex: 1,
        textAlign: 'center',
        color: '#f00',
      },

      textContent: {
        flex: 1,
        fontSize: 11,
        color: '#000',
        textAlign: 'center',
      },

      img: {
        height: 55,
        width: 100,
      }
});
